<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .el-card__body, .el-main{
            padding: 10px;
        }
        .el-descriptions {
            font-size: 16px;
            font-family: 微软雅黑;
            width: 700px;

        }

        .el-descriptions__title {
            font-weight: bold;
            font-size: 22px;
        }

        .el-descriptions-item__label.is-bordered-label {
            width: 120px;
            height: 50px;
        }

        .el-page-header__content {
            color: white;
            font-weight: bold;
        }

        .demo-form-inline {
            margin: 20px 0 0 20px;
            font-weight: bold;
        }

        p {
            text-align: center;
            font-size: 20px;
            font-family: 新宋体;
            font-weight: bold;
        }

        .t_img {
            position: fixed;
            top: 200px;
            left: 750px;
        }

        img {
            width: 300px;
            height: 250px;
        }
    </style>
</head>
<body>
<div id="app">
    <!--左上角返回上一页-->
    <el-page-header style="background-color: #3f3f3f; color: white;
    line-height: 60px;" @back="goBack" content="教师信息查询">
    </el-page-header>
    <el-form :inline="true" :model="t" class="demo-form-inline">
        <el-form-item label="教师姓名:">
            <el-input v-model="name" placeholder="请输入教师姓名"></el-input>
        </el-form-item>
        <el-form-item label="职工ID:">
            <el-input v-model="jobId" placeholder="请输入职工id"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="select">查询</el-button>
        </el-form-item>
    </el-form>
    <hr>
    <p v-if="display">暂无数据</p>
    <div v-else>
        <el-descriptions class="margin-top" title="教师详情信息" :column="1" :size="size" border>
            <template slot="extra">
                <el-button type="warning" icon="el-icon-edit" @click="updateTeacher()">修改信息</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="deleteTeacher()">删除教师</el-button>
            </template>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-user"></i>
                    姓名:
                </template>
                {{t.name}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-female"></i>
                    性别:
                </template>
                {{t.gender}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-watch-1"></i>
                    年龄:
                </template>
                {{t.age}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    手机号:
                </template>
                {{t.number}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-sunset"></i>
                    教龄:
                </template>
                {{t.seniority}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-school"></i>
                    所属系:
                </template>
                {{t.courseName}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-collection-tag"></i>
                    学科ID:
                </template>
                {{t.courseId}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-set-up"></i>
                    班级:
                </template>
                {{t.grade}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-data-line"></i>
                    入职时间:
                </template>
                {{t.created}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-upload2"></i>
                    教研级别:
                </template>
                {{t.level}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-picture-outline-round"></i>
                    职工ID:
                </template>
                {{t.jobId}}
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-office-building"></i>
                    企业:
                </template>
                <el-tag size="medium">学校</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location"></i>
                    居住地:
                </template>
                {{t.address}}
            </el-descriptions-item>
        </el-descriptions>
        <div class="t_img">
            <p style="font-family: 微软雅黑;color: #211d1d;margin-bottom: 10px">证件照片:</p>
            <el-card>
            <img :src="t.url" width="100%" alt="">
            </el-card>
        </div>
    </div>
</div>
</body>
<!--inport Axios Framework-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                size: 'medium',
                display: true,
                name:'',
                jobId: '',
                t: {
                    name: '',
                    age: '',
                    address: '',
                    number: '',
                    seniority: '',
                    courseName: '',
                    courseId: '',
                    grade: '',
                    created: '',
                    level: '',
                    jobId: '',
                    url: '',
                    gender:''
                }
            }
        },
        methods: {
            //修改信息
            updateTeacher(){
                location.href="/updateTeacher.html?jobId="+v.t.jobId;
            },
            //删除教师
            deleteTeacher(){
                if (confirm("您确认删除该教师吗?")){
                    axios.get("teacher/delete?jobId="+v.t.jobId+"&url="+v.t.url).then(function (response) {
                        v.$message("删除成功!")
                        location.href="admin.html";
                    })
                }
            },
            goBack() {
                history.back();//返回上一页面
            },
            select() {
                if (v.name==''){
                    this.$message.error("教师姓名不能为空!")
                }else if (v.jobId==''){
                    this.$message.error("职工ID不能为空!")
                }else {
                    axios.get("/teacher/selectDetail?name=" + v.name + "&jobId=" + v.jobId).then(function (response) {
                        v.display = false;
                        v.t = response.data;
                    })
                }
            }
        },
    })
</script>
</html>